<section class="content-header">
  <h1>
    {{title}}
  </h1>
</section>

<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-3 col-md-push-9">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">查询区域</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div class="form-group">
            <label for="DateTimeRange">时间</label>
            <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
          </div>
          <div class="form-group">
            <label>区域</label>
            <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
            (onValueChanged)="onSubAreaSelectedChange($event)" [(selectedItem)]="subAreaSelected" [value]="subAreaItems[0]" [searchEnabled]="true">
            </dx-select-box>
        </div>
        <div class="form-group">
            <label>设备</label>
            <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected" displayExpr="equipment"
                placeholder="请选择工位" [showClearButton]="true" [dataSource]="equipemntItems">
                <dxo-drop-down-options [width]="510" [height]="340"></dxo-drop-down-options>
                <div *dxTemplate="let data of 'content'">
                    <button type="button" (click)="clearEquipmentSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                    <button type="button" (click)="equipmentSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                    <dx-data-grid [dataSource]="equipemntItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }" [filterRow]="{ visible: true }"
                        [(selectedRowKeys)]="equipmentSelected" [scrolling]="{ mode: 'infinite' }" [height]="265"
                        [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                        <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                        <dxi-column dataField="equipmentType" caption="设备类型" [width]="100">
                        </dxi-column>
                        <dxi-column dataField="supplier" caption="供应商" [width]="100">
                        </dxi-column>
                        <dxi-column dataField="stationCode" caption="工位" [width]="100">
                        </dxi-column>
                        <dxi-column dataField="equipment" caption="设备" [width]="100">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </dx-drop-down-box>
        </div>
          <div class="form-group">
            <label>班次</label>
            <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems" displayExpr="shiftName"
              [(selectedItem)]="shiftSelected" [value]="shiftItems[0]" [searchEnabled]="true">
            </dx-select-box>
          </div>
        </div>
        <div class="box-footer">
          <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
        </div>
      </div>
    </div>

    <div class="col-md-9 col-md-pull-3">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">FTA平均值图表</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div echarts [options]="ftaChartOption" class="demo-chart" (chartInit)="onChartInit('FTA平均值图表',$event)" style="height:300px;width:100%;"></div>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <!-- *ngFor="let i of list" -->
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">FTA趋势图表</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div echarts [options]="ftaChartOptionQ" class="demo-chart" (chartInit)="onChartInit('FTA趋势图表',$event)" style="height:300px;width:100%;"></div>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <!-- /.box-header -->
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">FTA统计</h3>
          <div class="box-tools pull-right">
            <button (click)="exportTable()" type="button" class="btn btn-box-tool">
              <i class="glyphicon glyphicon-save"></i>
            </button>
          </div>
        </div>
        <div class="t">
          <table id="fta" style="width:100%;overflow: auto;text-align: center;" class="table-bordered">
            <!--工位-->
            <ng-container *ngFor="let stationList of moeeJson; let rowIndex = index;">
              <ng-container *ngIf="rowIndex==0">
                <tr style="height:40px;line-height:40px;">
                  <td rowspan="2">工位</td>
                  <td rowspan="2">平均</td>
                  <!--日期-->
                  <td [attr.colspan]="dayList.data.length" *ngFor="let dayList of stationList.data">
                    {{dayList.day}}
                  </td>
                </tr>
              </ng-container>
            </ng-container>
            <!--班次-->
            <ng-container *ngFor="let stationList of moeeJson; let rowIndex = index;">
              <ng-container *ngIf="rowIndex==0">
                <tr style="height:40px;line-height:40px;">
                  <ng-container *ngFor="let dayList of stationList.data">
                    <td *ngFor="let shiftList of dayList.data">
                      {{shiftList.shift}}
                    </td>
                  </ng-container>
                </tr>
              </ng-container>
            </ng-container>
            <!--数据-->
            <ng-container *ngFor="let stationList of moeeJson; let rowIndex = index;">
              <tr style="height:40px;line-height:40px;">
                <td>
                  {{stationList.station}}
                </td>
                <td>
                  {{stationList.avg}}
                </td>
                <ng-container *ngFor="let dayList of stationList.data">
                  <td *ngFor="let shiftList of dayList.data">
                    {{shiftList.fta=='-1'?'N/A':shiftList.fta}}
                  </td>
                </ng-container>
              </tr>
            </ng-container>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>